import * as echarts from 'echarts'
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'

import { ViolationCategoryData } from '../../data'
import { getOption } from './constants'

export type ProgressChartRef = {
  resize?: () => void
}

export type ProgressChartProps = {
  chartData: ViolationCategoryData[]
  rollTime?: number
  colors: string[][]
}

const ProgressChart = forwardRef<ProgressChartRef, ProgressChartProps>(
  (props, ref) => {
    const { rollTime = 5000, chartData, colors = [] } = props

    const myChart = useRef<echarts.EChartsType>()
    const chartDom = useRef<HTMLDivElement>(null)

    let timer: any = null

    // 开启定时器
    const initialScroll = (dataLen: number, myChart: any) => {
      const option = myChart.getOption()

      const time = setInterval(() => {
        if (chartData.length <= 4) {
          return
        }
        if (option?.dataZoom[0].endValue >= dataLen - 1) {
          option.dataZoom[0].endValue = 3
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
        }
        // myChart.setOption(option)
        myChart.setOption({
          dataZoom: [
            {
              type: 'slider',
              startValue: option.dataZoom[0].startValue,
              endValue: option.dataZoom[0].endValue
            }
          ]
        })
      }, Number(rollTime))

      timer = time
    }

    // 移除y轴tip
    const removeAxisTip = () => {
      const axisTip: any = document.querySelector('.axis-tip')
      if (axisTip) {
        axisTip.innerText = ''
        axisTip.style.display = 'none'
      }
    }

    useEffect(() => {
      myChart.current = echarts.init(chartDom.current, null, {
        renderer: 'canvas'
      })

      myChart.current.setOption(getOption(chartData, colors))

      if (chartData.length > 4) {
        initialScroll(chartData.length, myChart.current)
        // 鼠标离开开启定时器
        chartDom.current?.addEventListener('mouseout', () => {
          if (timer) return
          initialScroll(chartData.length, myChart.current)
        })
      }
      chartDom.current?.addEventListener('mouseover', () => {
        clearInterval(timer)
        timer = undefined
        removeAxisTip()
      })

      myChart.current?.on?.('mouseover', 'yAxis.category', function (e: any) {
        const axisTip: any = document.querySelector('.axis-tip')
        if (axisTip) {
          axisTip.innerText = e.value
          axisTip.style.left = (Number(e?.event?.event?.screenX) || 0) + 'px'
          axisTip.style.top = (Number(e?.event?.event?.screenY) || 0) + 'px'
          axisTip.style.display = 'block'
        }
      })

      return () => {
        clearInterval(timer)
        myChart.current?.off('mouseover', () => {})
        chartDom.current?.removeEventListener('mouseout', () => {})
        chartDom.current?.removeEventListener('mouseover', () => {})
        timer = null
      }
    }, [chartData])

    useImperativeHandle(ref, () => ({
      resize: () => {
        if (myChart.current) {
          myChart.current.resize()
        }
      }
    }))

    return (
      <>
        <div style={{ width: '100%' }}>
          <div
            ref={chartDom}
            style={{ width: '300px', minHeight: '152px' }}
          ></div>
        </div>
      </>
    )
  }
)

export default ProgressChart
